<template>
  <div>
    <el-dialog :visible.sync="addFormVisible" :title="title" width="28%">
      <el-form
        ref="deptForm"
        :model="deptForm"
        class="demo-ruleForm"
        prop="name"
        size="mini"
      >
        <el-form-item :label-width="formLabelWidth" label="部门名称" required prop="name">
          <el-input v-model="deptForm.name" maxlength="12" placeholder="请输入部门名称（6-12位）" autocomplete="off" />
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '部门编码',trigger: 'blur'},
          ]"
          label="部门编码"
          prop="userName"
        >
          <el-input v-model="deptForm.code" placeholder="请输入部门编码（6-12位）" autocomplete="off" />
        </el-form-item>
        <el-form-item
          :rules="[
            { required: true, message: '请选择用户所属的部门',trigger: 'change'},
          ]"
          :label-width="formLabelWidth"
          prop="parentCode"
          label="所属机构"
        >
          <el-cascader
            v-model="deptForm.parentCode"
            :options="deptInfoTreeData"
            placeholder="选择所属上级部门"
            filterable
            style="width:100%"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="orderNum" label="排序">
          <el-input v-model="deptForm.orderNum" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-radio v-model="deptForm.status" label="1">
            正常
          </el-radio>
          <el-radio v-model="deptForm.status" label="2">
            禁用
          </el-radio>
        </el-form-item>
      </el-form>
      <span style="padding-left:35%" class="dialog-footer">
        <el-button :loading="submitLoad" size="mini" type="primary">{{ deptId }}确 定</el-button>
        <el-button size="mini" @click="addFormVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['deptId'],
  data() {
    return {
      title: '新增部门',
      formLabelWidth: '80px',
      deptInfoTreeData: [],
      addFormVisible: true,
      submitLoad: false,
      deptForm: {
        name: '',
        code: '',
        parentCode: '',
        orderNum: null,
        status: '1'
      }
    }
  },
  methods: {

  }
}
</script>

